<template>
  <div class="box1">
    <ul>
      <li v-for="item in list" :key="item.id">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FirstCom',
  data () {
    return {
      list: [
        {
          id: 1,
          name: '星期一',
          path: '/monday'
        },
        {
          id: 2,
          name: '星期er',
          path: '/tuesday'
        },
        {
          id: 3,
          name: '星期三',
          path: '/wednesday'
        },
      ]
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
* {
  margin: 0;
  padding: 0;
}
.box1 {
  display: flex;
  width: 100%;
  height: 100%;
  ul {
    list-style: none;
    width: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    li {
      flex: 1;
    }
    a {
      text-decoration: none;
      width: 100%;
      height: 100%;
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
